<template>
    <div class="qx-container p-all-10">
        <tabs></tabs>
        <div class="mol-box—con" v-if="dataObj">
            <div class="mol-box_item el-card box-card is-always-shadow">
                <div class="el-card__header">商家总数量</div>
                <div class="el-card__body">{{dataObj.merchantCount}}</div>
            </div>
            <div class="mol-box_item el-card box-card is-always-shadow">
                <div class="el-card__header">今日新增商家数量</div>
                <div class="el-card__body">{{dataObj.todayCreateMerchantCount}}</div>
            </div>
            <div class="mol-box_item el-card box-card is-always-shadow">
                <div class="el-card__header">30天内到期商家数量</div>
                <div class="el-card__body">{{dataObj.endTime30days}}</div>
            </div>
            <div class="mol-box_item el-card box-card is-always-shadow">
                <div class="el-card__header">过期商家数量</div>
                <div class="el-card__body">{{dataObj.passEndTime}}</div>
            </div>
            <div class="mol-box_item el-card box-card is-always-shadow">
                <div class="el-card__header">小程序开通数量</div>
                <div class="el-card__body">{{dataObj.openMiniAppCount}}</div>
            </div>
			<div class="mol-box_item el-card box-card is-always-shadow">
				<div class="el-card__header">VIN查询开通数量</div>
				<div class="el-card__body">{{dataObj.openVinCount}}</div>
			</div>
			<div class="mol-box_item el-card box-card is-always-shadow">
				<div class="el-card__header">平台商品数量</div>
				<div class="el-card__body">{{dataObj.goodsCount}}</div>
			</div>
			<div class="mol-box_item el-card box-card is-always-shadow">
				<div class="el-card__header">今日新增商品数量</div>
				<div class="el-card__body">{{dataObj.todayCreateGoodsCount}}</div>
			</div>
        </div>
    </div>
</template>
<script>
    import tabs from '@/components/tabs/tabs.vue'
    import {SUCCESS_REQUEST_STATUS} from '@/utils/config.js'
    export default {
        data() {
            return {
				dataObj : null
            }
        },
        created() {
            this._initData()
        },
        methods: {
            _initData() {
                this.$ajax({
                    api: 'index/data'
                }).then(res => {
					console.log(res)
                    if (res.status === SUCCESS_REQUEST_STATUS) {
						this.dataObj = res.data
					}
                })
            }
        },
        components: {
            tabs
        }
    }
</script>

<style scoped>
    .qx-container {
        display: flex;
        flex: 1;
		height: 100%;
		overflow: auto;
        box-sizing: border-box;
        flex-direction: column;
    }

    .mol-box {
        width: 100%;
        height: 100%;
    }

    .mol-box_item {
        float: left;
        width: 20%;
        margin: 0px 25px 25px;
        font-size: 16px;
        text-align: center;
    }

    .el-card__header {
        padding: 18px 20px;
        border-bottom: 1px solid #ebeef5;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .el-card__body {
        padding: 20px;
    }

    .el-card__body>span {
        font-size: 20px;
        line-height: 60px;
    }

    .el-card.is-always-shadow {
        -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
</style>
